<template>
    <section id="article-page">
      <main class='banner'></main>
      <section class="article-title">
         <w-row>
             <w-cell :width="iconTitleWidth">
               <img src="../../../static/img/list.png"/>
             </w-cell>
             <w-cell>
               <h2>学术资讯</h2>
             </w-cell>
         </w-row>
      </section>

     <section class="article-list"> 
      <!--<w-loadmore ref="loadmore" 
                :on-infinite="loadBtm" 
                :on-refresh="loadTop">-->
         <w-row v-for="(item,index) in articleList" :key="index" @click="toDetail(item.ID)" class="articleli">
           <w-cell :width="iconWidth" :iconAlign="iconAlign">
              <img class='left-banner' src='../../assets/img/zx/article-banner.jpg'/>
           </w-cell>
           <w-cell style="margin-left: 0.3rem;">
             <w-row>
               <p class="des">{{item.Title}}</p>
             </w-row>
             <w-row>
                <w-cell class="date">{{item.CreatedTime | changeDateFormat}}</w-cell>
                <w-cell class="read-msg">
                   <w-row>
                     <w-cell><span class="look">{{item.WatchCount || 0}}</span></w-cell>
                     <w-cell><span class="like">{{item.LikeCount || 0}}</span></w-cell>
                     <w-cell><span class="star">{{item.StarCount || 0}}</span></w-cell>
                   </w-row>
                </w-cell>
             </w-row>
           </w-cell>
         </w-row>
       <!-- </w-loadmore> -->
      </section>
 </section>
</template>

<script>
 import { mapGetters, mapActions } from 'vuex';
 export default {
    name: "article",
    data() {
        return {
            iconWidth: 20,
            iconTitleWidth: 30,
            iconAlign: 'center',

             totalPage: 3,
             curpage: 0
        }
    },
    filters: {  
      changeDateFormat: function (val) {  
          if (val != null) {
            var date = new Date(parseInt(val.replace("/Date(", "").replace(")/", ""), 10));
            //月份为0-11，所以+1，月份小于10时补个0
            var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
            var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
            return date.getFullYear() + "-" + month + "-" + currentDate;
          }
            return "";
      }
    }, 
    computed: {
        ...mapGetters({
            articleList: 'articleList'
        })
    },
    mounted() {
        this.setLoading(true);
        this.getArticleList({}).then((res) => {
            this.setLoading(false);
        })
    },
    methods: {
        ...mapActions([
            'getArticleList',
            'setLoading'
        ]),
        toDetail: function(id) {
            this.$router.push({name:'Detail',params: {aid: id}});
        },
        loadBtm:function(done) {
            this.curpage++;
            if (this.curpage>this.totalPage){
                return;
            }
            setTimeout(function() {
                var list = this.getArticleList();
                this.datas = this.datas.concat(list);
                done(this.curpage==3 ? 'no-more':'');
            }.bind(this), 5000);
        },
        loadTop: function(done) {
            setTimeout(function() {
                var list = this.getArticleList();
                this.datas = list;
                this.curpage = 1;
                done()
            }.bind(this), 5000);
        }
    }
 }
</script>

<style lang="scss" scoped>
   #article-page {
         font-size: 0.5rem !important;
         .banner {
           width: 18.75rem;
           height: 8.775rem;
           background: url('../../assets/img/zx/banner.png') 0 0 no-repeat;
           background-size: cover;
       }
       .article-title {
           background: #f2f2f2;
           padding: 0 0.5rem;
           img {
             width: 1rem;
           }
           h2 {
               color: #005ba8;
               font-weight: bold;
           }
       }
       .article-title > div {
           height: 1.8rem;
       }
       .article-list {
           width: 95%;
           margin: 0 auto;
           padding: 0.5rem 0;
           border-bottom: 1px solid #e7e7e7;
           .articleli {
               border-bottom: 1px solid #e7e7e7;
               padding: 0.2rem 0;
           }
           .left-banner {
               width: 4.725rem;
           }
           .des {
               margin: 0 0 0.35rem 0;
           }
           .date,.read-msg {
               color: #d4d4d4;
           }
           .read-msg {
               display: inline-block;
               text-align: right;
           }
           .read-msg span {
               margin-left: 6px;
               text-align: right;
               display: inline-block;
               background-size: 35% auto;
               width: 1.5rem;
               height: 1rem;
               text-align: left;
               padding-left: 0.9rem;
               line-height: 1rem;
           }
           .look {
                  background: url('../../assets/img/zx/look.png') 0 center no-repeat;
           }
           .star {
                  width: 1.2rem !important;
                  height: 0.9rem !important;
                  background: url('../../assets/img/zx/star.png') 0 center no-repeat;
           }
           .like {
                  background: url('../../assets/img/zx/like.png') 0 center no-repeat;
           }
       }
   }
</style>